<template>
	<div class="wrapper">
		<label>
			username:<input type="text" v-model="userName">
		</label><br>
		<label>
			password:<input type="text" v-model="password">
		</label><br>
		<button @click="handleSubmit" class="loginBtn">登录</button>
	</div>
</template>
<script>
	import {mapActions} from 'vuex';
	export default {
		name: 'Login',
		data() {
			return {
				userName: '',
				password: ''
			}
		},
		methods: {
			...mapActions(['login']),
			handleSubmit() {
				this.login({
					userName: this.userName,
					password: this.password
				}).then(() => {
					this.$router.push({
						name: 'home'
					})
				}).catch(error => console.log(error));
			}
		}
	}
</script>

<style lang="less">
	.wrapper{
		margin: 50px;

		.loginBtn{
			margin: 20px 0 0 150px;
		}
	}
</style>
